import React, {Component} from 'react';
import style from './Modal.module.css';

class Modal extends Component {
  static defaultProps = {
    toast: false,
    show: false,
    ok: () => {
    },
    cancel: () => {
    },
    title: {},
    children: <></>
  };

  componentWillReceiveProps(nextProps, nextContext) {
    let {toast, show, cancel} = nextProps;
    if (toast && show) {
      //过2秒消失
      setTimeout(() => cancel(), 2000)
    }
  }

  render() {
    let {
      show, ok, title,
      cancel, toast
    } = this.props;
    return (
      <>
        {show && <div className={style.modalMask}>
          {/*中间居中*/}
          <div className={style.modalWrapper}>
            {/*内容*/}
            {toast && <div className={style.toast}>
              {this.props.children}
            </div>}
            {!toast && <div className={style.modalContainer}>
              {/*头部*/}
              <div className={style.modalHeader}>
                <h2>{title}</h2>
              </div>
              {/*内容*/}
              <div className={style.modalBody}>
                {this.props.children}
              </div>
              {/*尾部*/}
              <div className={style.modalFooter}>
                <button onClick={() => ok()} className={style.ok}>确定</button>
                <button onClick={() => cancel()} className={style.cancel}>取消</button>
              </div>
            </div>}
          </div>
        </div>
        }
      </>
    );
  }
}

export default Modal;
